<template>
  <div class="dialog">
    <div class="top-bar">{{ dialogName }}</div>
    <div class="dialog-content" ref="dialogContent">
      <div v-for="message in messages" :key="message.id" class="message" :class="{'user-message':
      message.from === 'user','reply-message': message.from === 'reply'}">
        <div class="avatar-user" v-if="message.from === 'user'"></div>
          <img src= "../assets/cookHeadPhoto.png" class="avatar-reply" alt="Avatar" v-if="message.from === 'reply'">
        <div class="message-content">{{ message.content }}</div>
        <div class="message-time">{{ message.time }}</div>
      </div>
    </div>
    <div class="bottom-bar">
      <el-Input class="input-text" v-model="inputText" type="text" placeholder="请输入消息"
                @keyup.enter="sendMessage"/>
      <el-button class="send-button" @click="sendMessage">发送</el-button>
    </div>
  </div>
</template>
<script>
import {Avatar} from "@element-plus/icons-vue";

export default {
  components: {
    // eslint-disable-next-line vue/no-unused-components
    Avatar,
},
  data() {
    return {
      dialogName: '',
      inputText: '',
      messages: [],
      socket: null,
    };
  },
  created() {
    this.dialogName = this.$route.query.cookName;
  },
  methods: {
    sendMessage() {
      // 移除之前添加的事件监听器
      if (this.socket) {
        this.socket.removeEventListener('message', this.handleMessage);
      }

      // 创建WebSocket连接
      this.socket = new WebSocket('ws://192.168.117.17:8000');

      // 监听WebSocket连接打开事件
      this.socket.addEventListener('open', () => {
        // 发送用户输入的消息到后端
        this.socket.send(this.inputText);
        this.messages.push({ content: this.inputText, time: new Date().toLocaleTimeString(), from: 'user' });
        // 添加用户输入消息到列表
        // 清空输入框
        this.inputText = '';
        this.scrollDialogToEnd();
        // ...
      });

      // 添加新的事件监听器
      this.socket.addEventListener('message', this.handleMessage);
    },
    handleMessage(event) {
      // 接收到后端的回复消息
      const reply = event.data;
      // 处理回复消息
      if (reply instanceof Blob) {
        const reader = new FileReader();
        reader.onload = () => {
          const decodedReply = reader.result;
          // 添加回复消息到对话框中
          this.messages.push({ content: decodedReply, time: new Date().toLocaleTimeString(), from: 'reply' });
          this.scrollDialogToEnd();
        };
        reader.readAsText(reply);
      } else {
        // 添加回复消息到对话框中
        this.messages.push({ content: reply, time: new Date().toLocaleTimeString(), from: 'reply' });
        this.scrollDialogToEnd();
      }
    },
    scrollDialogToEnd() {
      this.$nextTick(() => {
        const element = this.$refs.dialogContent;
        element.scrollTop = element.scrollHeight;
      });
    },
  }
};
</script>
<style scoped>
.dialog {
  width: 90vw;
  margin: 0 auto;
}
.top-bar {
  background-color: #1D815B;
  padding: 10px;
  text-align: center;
  color: white;
}
.dialog-content {
  height: 80vh;
  background-color: #EEF7F2;
  overflow-y: scroll;
  border: 1px solid #ccc;
  padding: 10px;
}
.message {
  margin-bottom: 10px;
}
.message.user-message {
  text-align: right;
}
.message.reply-message {
  text-align: left;
}
.avatar-user {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #ccc;
  float: right;
  margin-left: 10px;
  background-image: url("@/assets/1.png");
  background-size: cover;
  background-position: center;
}
.avatar-reply{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #ccc;
  float: left;
  margin-right: 10px;
  background-size: cover;
  background-position: center;
}
.message.reply-message .message-content {
  border-radius: 4px;
  background-color: #1172B4;
  color: white;
}
.message.user-message .message-content {
  border-radius: 4px;
  background-color: #1D815B;
  color: white;
}
.message-content {
  padding: 5px;
  display: inline-block;
}
.message-time {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}
.bottom-bar {
  background-color: #A4CAB6;
  padding: 10px;
  text-align: center;
}
.input-text{
  border: transparent;
  width: 50vw;
  height:30px;
  border-radius: 4px;
}
.send-button{
  margin-left: 20px;
  background-color: #1D815B;
  color: white;
  border: transparent;
}
</style>